<template>
  <div style="width: 100%" class="border-none">
    <div style="width: 100%" v-for="(menu, index) in menulist" :key="index">
      <div
        v-bind:class="[
          'menuWidth1',
          'cc-display',
          { menuSelect: currentMenu === menu.menuvalue }
        ]"
        @click="menuOneClick(index, menu.menuvalue)"
      >
        <span style="font-size: 18px; width: 80px" class="two-ends">{{
          menu.meunname
        }}</span>
      </div>
      <div
        v-for="(item, itemid) in menu.menusonlist"
        :key="itemid"
        v-bind:class="[
          'menuWidth2',
          'cc-display',
          { menuSelect: currentMenu === item.menuvalue }
        ]"
        v-on:click="currentMenu = item.menuvalue"
        v-show="menuTwoOn[index]"
      >
        <span style="width: 80px; font-size: 16px" class="two-ends">{{
          item.meunname
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuList",
  props: {
    textinfo: String
  },
  data() {
    return {
      /** 菜单列表 */
      menulist: [],

      /** 控制一级菜单是否展开 */
      menuTwoOn: [false, true, false, false, false, false, false, false, false],

      /** 当前选择的菜单，菜单切换时进行样式管理 */
      currentMenu: "firstPage"
    };
  },
  created() {
    this.getUserMenuList();
  },
  methods: {
    /**
     * @function 二级菜单是否隐藏
     * @param {*} info
     */
    menuOneClick(info, menuvalue) {
      this.$set(
        this.menuTwoOn,
        info,
        this.menuTwoOn[info] == false ? true : false
      );
      this.currentMenu =
        menuvalue == "firstPage" ? "firstPage" : this.currentMenu;
    },
    /**
     * @method getUserMenuList && 查询用户菜单列表
     */
    getUserMenuList() {
      this.axios
        .get("getinfo/menu")
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.menulist = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  watch: {
    /**
     * @function 传入菜单名|菜单切换后传递事件到上级组件
     * @param {*} val
     */
    currentMenu(val) {
      this.$emit("change-menu", val);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.outSide {
  height: 80px;
  width: 240px;
}

.menuWidth1 {
  width: 100%;
  height: 50px;
  color: #333;
}

.menuWidth2 {
  width: 100%;
  height: 50px;
  color: #707070;
}

.menuWidth1:hover {
  background-color: rgba(0, 161, 214, 0.5);
  cursor: pointer;
}

.menuWidth2:hover {
  background-color: rgba(0, 161, 214, 0.5);
  cursor: pointer;
}

.menuSelect {
  background-color: #00a1d6;
  color: #fff;
}
</style>
